<template>
	<a-modal
		v-model:visible="visible"
		title="事件回放"
		:mask-closable="false"
		:width="800"
		:destroy-on-close="true"
		:footer="null"
	>
		<a-empty v-if="!videoOptions.src">
			<template #description>
				<span>未获取视频</span>
			</template>
		</a-empty>
		<div style="display: flex;justify-content: center;">
			<videoPlay v-bind="videoOptions" v-if="videoOptions.src"/>
		</div>
	</a-modal>
</template>
<script setup name="bizEventVideo">
	import 'vue3-video-play/dist/style.css'
	import { videoPlay } from 'vue3-video-play'
	import { message } from 'ant-design-vue'
	import bizVideoApi from '@/api/biz/bizVideoApi'

	let visible = $ref(false)
	const videoOptions = reactive({
		width: '600', //播放器高度
		height: '400', //播放器高度
		src: null, //视频源
		type: 'm3u8',
		muted: false, //静音
		webFullScreen: false,
		autoPlay: false, //自动播放
		loop: false, //循环播放
		control: true //是否显示控制器
	})
	// 打开弹框
	const onOpen = (id) => {
		visible = true
		bizVideoApi.bizQueryEventStreamUrl({
			eventId: id
		}).then((data) => {
			videoOptions.src = data.videoList[0].videoUrl
		})
	}

	defineExpose({
		onOpen
	})
</script>
